<template>
	<view class="content">
		<view class="inner">
			<view class="top">
				手机号登陆
			</view>
		</view>
		<view class="middle">
			<!-- 基础表单校验 -->
			<uni-forms ref="valiForm" :rules="rules" :modelValue="login">
				<view class="body">
					<uni-forms-item label="手机号" required name="phone">
						<uni-easyinput style="width: 548rpx; height: 98rpx;" v-model="login.phone"
							placeholder="请输入手机号" />
					</uni-forms-item>
				</view>
				<view class="captcha">
					<uni-forms-item label=" 验证码" name="captcha" style="display: flex;">
						<uni-easyinput style="width: 300rpx; height: 98rpx" :clearable="false" v-model="login.captcha"
							placeholder="请输入验证码" />
					</uni-forms-item>
					<button v-if="!btnStatus" class="btn" @click="getCode">获取验证码</button>
					<view v-if="btnStatus" class="time">
						<view style="line-height: 40rpx;">再次发送</view>
						<uni-countdown :show-day="false" :showHour="false" :show-minute="false" :second="60"
							@timeup="timeup"></uni-countdown>
					</view>
				</view>

				<view style="width: 700rpx;text-align: center;margin-top: 100rpx;">
					<button type="primary" style="height: 120rpx;width: 600rpx;font-size: 50rpx;line-height: 120rpx;"
						@click="submit('valiForm')">登录</button>
				</view>
			</uni-forms>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnStatus: false,
				//登录
				login: {
					phone: '13222222222', //手机号
					captcha: '', //验证码
				},
				//校验规则
				rules: {
					// number 字段的校验规则
					phone: {
						rules: [
							//校验number不能为空
							{
								required: true,
								errorMessage: '请填写正确手机号',
							},
							// 对number字段进行长度验证
							{
								minLength: 11,
								maxLength: 11,
								errorMessage: '手机号长度11个字符',
							}
						]
					},
					// captcha 字段的校验规则
					captcha: {
						rules: [
							//校验captcha不能为空
							{
								required: true,
								errorMessage: '请输入正确的验证码'
							},
							// 对captcha字段进行长度验证
							{
								maxLength: 4,
								errorMessage: '验证码长度 {maxLength} 个字符',
							}
						]
					}
				}
			}
		},
		methods: {
			//校验并登录
			submit(ref) {
				let that = this
				//this.$refs[ref].validate()布尔值 true或false
				this.$refs[ref].validate().then(res => {
					uni.request({
						url: 'http://localhost:8080/auth/appLogin',
						method: 'POST',
						data: {
							phone: this.login.phone,
							code: this.login.captcha
						},
						success(res) {
							if (res.data.code == 200) {
								uni.setStorageSync('token', res.data.data.access_token)
								// 获取用户信息
								that.getUserInfo(),
									//存储默认车辆
									that.getInfo()
								uni.switchTab({
									url: '/pages/index/index'
								})
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none',
									duration: 2000
								})
							}
						}
					})
				}).catch(err => {
					uni.showToast({
						title: '服务器繁忙',
						duration: 2000
					})
				})
			},
			getCode() {
				let that = this
				let tel_test = /^1[3456789]\d{9}$/;
				if (!tel_test.test(this.login.phone)) {
					uni.showToast({
						title: '手机号格式错误',
						icon: 'error',
						duration: 2000
					})
				} else {
					uni.request({
						url: 'http://localhost:8080/auth/getCode',
						method: 'POST',
						data: {
							phone: this.login.phone,
						},
						success(res) {
							if (res.data.code == 200) {
								uni.showToast({
									title: '验证码已发送',
									icon: 'success',
									duration: 2000
								})
								that.btnStatus = true
							} else {
								uni.showToast({
									title: res.data.msg,
									duration: 2000
								})
							}
						}
					})
				}
			},
			// 获取用户信息 存储到本地
			getUserInfo() {
				let that = this
				uni.request({
					url: 'http://localhost:8080/user/user/list',
					header: {
						'Authorization': 'Bearer ' + wx.getStorageSync('token')
					},
					method: 'GET',
					data: {
						phone: that.login.phone
					},
					success(res) {

						if (res.data.code == 200) {
							uni.setStorageSync('userInfo', res.data.rows[0])
						}
					}
				})
			},
			getInfo() {
				uni.request({
					url: 'http://localhost:8080/user/info/list',
					header: {
						'Authorization': 'Bearer ' + wx.getStorageSync('token')
					},
					method: 'get',
					data: {
						uid: uni.getStorageSync('userInfo').id,
						defaulted: 1
					},
					success: (resp) => {
						console.log(resp)
						if (resp.data.code == 200) {
							if (resp.data.total == 0) {
								uni.setStorageSync('defaultedCar', null)
							} else if (resp.data.total == 1) {
								uni.setStorageSync('defaultedCar', resp.data.rows[0])
							}
						}
					}
				})
			},
			timeup() {
				this.btnStatus = false
			}
		}
	}
</script>

<style>
	page {
		background-color: white;
	}

	.content {
		margin-top: 24rpx;
		width: 750rpx;
		background-color: white;
		padding-left: 40rpx;
		padding-right: 40rpx;
	}

	.inner {
		width: 290rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 48rpx;
		margin-top: 182rpx;
		font-family: SourceHanSansSC-regular;
		margin-bottom: 58rpx;
	}

	.middle {
		background-color: #fff;
		width: 750rpx;
	}

	.body {
		border-bottom: 2rpx solid #B7B7C3;
		height: 150rpx;
		width: 700rpx;
		margin-bottom: 40rpx;
	}

	.captcha {
		display: flex;
		border-bottom: 2rpx solid #B7B7C3;
		height: 150rpx;
		width: 700rpx;
		margin-bottom: 40rpx;
	}

	.btn {
		width: 200rpx;
		height: 78rpx;
		font-size: 22rpx;
		line-height: 78rpx;
		margin-left: 10rpx;
		background-color: #007AFF;
		color: white;
	}

	.time {
		height: 70rpx;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		margin-left: 20rpx;
		padding: 0 10rpx;
		background-color: #eee;
		border-radius: 10rpx;
	}

	.time uni-countdown {
		display: flex;
		align-items: center;
	}
</style>